<template>
  <div>
    <div class="btn" @click="logout">退出登录</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 退出登录
    logout() {
      // 删除token
      localStorage.clear();
      // 提示
      let obj = { content: "您已退出,即将返回首页", icon: "success" };
      this.$store.dispatch("AsyncToast", obj);
      // 触发中的header中的
      // 跳去首页的 updateKeyFn
      this.$emit("updateKeyFn");
      setTimeout(() => {
        this.$router.push("/");
      }, 2000);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: @blue;
  color: #fff;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer;
}
</style>